<template>
    <div>
      <el-dialog
        center
        v-model="props.isShow"
        :title="$props.isAdd ? '添加菜单' : '编辑菜单'"
        :before-close="beforeClose"
      >
        <el-form :model="menuInfo" :rules="rules" ref="menuRef">
          <el-form-item
            label="菜单名称"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input v-model="menuInfo.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
            <el-select
              v-model="menuInfo.pid"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option :value="0" label="顶级菜单"></el-option>
              <el-option
                v-for="item in store.getters['menu/getMenu']"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="菜单类型" :label-width="formLabelWidth">
            <el-radio-group v-model="menuInfo.type" class="ml-4">
              <el-radio :label="1" size="large">目录</el-radio>
              <el-radio :label="2" size="large">菜单</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单图标" :label-width="formLabelWidth">
            <el-input v-model="menuInfo.icon" autocomplete="off" />
          </el-form-item>
          <el-form-item label="菜单地址" :label-width="formLabelWidth">
            <el-input v-model="menuInfo.url" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch
              v-model="menuInfo.status"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel(menuRef)">取消</el-button>
            <el-button @click="confirm(menuRef)" type="primary"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { addMenu, editMenu, getMenuInfo } from "../../request/api";
  //引入vue的一些方法
  import { defineProps, ref, defineEmits, defineExpose } from "vue";
  //引入数据类型验证
  import type { FormRules, FormInstance } from "element-plus";
  import { ElMessage } from "element-plus";
  import { useStore } from "vuex";
  const store = useStore();
  const indexID = ref(0);
  //设置label宽度
  const formLabelWidth = "120px";
  //定义接收父组件数据的值
  let props = defineProps(["isShow", "isAdd"]);
  //定义子传父的方法
  let emit = defineEmits(["cancel"]);
  //设置当前的表单对象
  let menuInfo = ref({
    pid: 0, //上级分类编号  注意：顶级菜单-0number
    title: "", //菜单名称string
    icon: "", //图标string
    type: 1, //类型 1目录2菜单number
    url: "", //菜单地址string
    status: 1, //状态   1正常2禁用   number类型number
  });
  //定义规则验证
  let rules = ref<FormRules>({
    title: [
      { required: true, message: "请输入菜单名称", trigger: "blur" },
      { min: 2, max: 6, message: "Length should be 2 to 6", trigger: "blur" },
    ],
    pid: [
      {
        required: true,
        message: "请选择上级菜单",
        trigger: "change",
      },
    ],
  });
  //定义快速获取DOM节点
  let menuRef = ref<FormInstance>();
  // const dialogFormVisible = true;
  // const value = ref("");
  // const radio1 = ref(1);
  // const value1 = ref(1);
  // const options = [
  //   {
  //     value: 1,
  //     label: "系统管理",
  //   },
  //   {
  //     value: 2,
  //     label: "商城管理",
  //   },
  // ];
  //封装一个关闭事件
  const cancel = (formEl: FormInstance | undefined) => {
    //告诉父组件关闭弹框
    emit("cancel", false);
    //清除表单对象
    menuInfo = ref({
      pid: 0, //上级分类编号  注意：顶级菜单-0number
      title: "", //菜单名称string
      icon: "", //图标string
      type: 1, //类型 1目录2菜单number
      url: "", //菜单地址string
      status: 1, //状态   1正常2禁用   number类型number
    });
    //清除规则验证
    if (!formEl) return;
    formEl.resetFields();
  };
  //封装一个关闭按钮事件
  const beforeClose = (done: any) => {
    done();
    cancel(menuRef.value);
  };
  //封装一个查找一条数据事件
  const lookup = (id: number) => {
    // console.log(id)
    getMenuInfo({ id }).then((res: any) => {
      menuInfo.value = res.list;
      // menuInfo.value.id = id  这个方法不对
      indexID.value = id;
    });
  };
  defineExpose({
    lookup,
  });
  //定义一个确定
  const confirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((val) => {
      if (val) {
        // console.log(menuInfo, "表单对象");
        if (props.isAdd) {
          addMenu(menuInfo.value).then((res: any) => {
            console.log(res, "添加成功");
            if (res.code == 200) {
              //关闭弹框
              cancel(menuRef.value);
              //信息提示
              ElMessage.success(res.msg);
              store.dispatch("menu/getMenuAction");
            } else {
              ElMessage.error(res.msg);
            }
          });
        } else {
          editMenu({ ...menuInfo.value, id: indexID.value }).then((res: any) => {
            console.log(res, "添加成功");
            if (res.code == 200) {
              //关闭弹框
              cancel(menuRef.value);
              //信息提示
              ElMessage.success(res.msg);
              store.dispatch("menu/getMenuAction");
            } else {
              ElMessage.error(res.msg);
            }
          });
        }
      }
    });
  };
  </script>
  
  <style scoped></style>
  